<!doctype html>
<html lang="zh">

<head>
  <title>Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/button.js';
    import '../../packages/mdui/components/icon.js';
    import '../../packages/icons/settings.js';
    import { $ } from '../../packages/jq/index.js';

    $('.loading').on('click', function () {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    });
  </script>
</head>

<body>
  <main>
    <section>
      <h2>Elevation Button</h2>
      <mdui-button variant="elevated">button</mdui-button>
      <mdui-button variant="elevated" disabled>disabled</mdui-button>
      <mdui-button variant="elevated" icon="settings">button</mdui-button>
      <mdui-button variant="elevated" end-icon="settings--outlined">button</mdui-button>
      <mdui-button variant="elevated" icon="settings" end-icon="arrow_drop_down">button</mdui-button>
      <mdui-button variant="elevated" no-ripple>no-ripple</mdui-button>
    </section>

    <section>
      <h2>Filled Button</h2>
      <mdui-button>button</mdui-button>
      <mdui-button variant="filled" disabled>disabled</mdui-button>
      <mdui-button variant="filled" icon="settings">button</mdui-button>
      <mdui-button variant="filled" end-icon="settings--outlined">button</mdui-button>
      <mdui-button variant="filled" icon="settings" end-icon="arrow_drop_down">button</mdui-button>
    </section>

    <section>
      <h2>Filled tonal Button</h2>
      <mdui-button variant="tonal">button</mdui-button>
      <mdui-button variant="tonal" disabled>disabled</mdui-button>
      <mdui-button variant="tonal" icon="settings">button</mdui-button>
      <mdui-button variant="tonal" end-icon="settings--outlined">button</mdui-button>
      <mdui-button variant="tonal" icon="settings" end-icon="arrow_drop_down">button</mdui-button>
    </section>

    <section>
      <h2>Outlined Button</h2>
      <mdui-button variant="outlined">button</mdui-button>
      <mdui-button variant="outlined" disabled>disabled</mdui-button>
      <mdui-button variant="outlined" icon="settings">button</mdui-button>
      <mdui-button variant="outlined" end-icon="settings--outlined">button</mdui-button>
      <mdui-button variant="outlined" icon="settings" end-icon="arrow_drop_down">button</mdui-button>
    </section>

    <section>
      <h2>Text Button</h2>
      <mdui-button variant="text">button</mdui-button>
      <mdui-button variant="text" disabled>disabled</mdui-button>
      <mdui-button variant="text" icon="settings">button</mdui-button>
      <mdui-button variant="text" end-icon="settings--outlined">button</mdui-button>
      <mdui-button variant="text" icon="settings" end-icon="arrow_drop_down">button</mdui-button>
    </section>

    <section>
      <h2>loading</h2>
      <mdui-button variant="elevated" class="loading">loading</mdui-button>
      <mdui-button variant="filled" disabled class="loading">loading</mdui-button>
      <mdui-button variant="tonal" icon="settings" class="loading">loading</mdui-button>
      <mdui-button variant="outlined" end-icon="settings--outlined" class="loading">loading</mdui-button>
      <mdui-button variant="text" icon="settings" class="loading">loading</mdui-button>
      <mdui-button variant="elevated" disabled loading>loading & disabled</mdui-button>
    </section>

    <section>
      <h2>full-width</h2>
      <div style="width: 300px">
        <mdui-button variant="elevated" icon="settings" full-width>button</mdui-button>
      </div>
    </section>

    <section>
      <h2>href</h2>
      <mdui-button variant="elevated" href="https://www.mdui.org" target="_blank">link</mdui-button>
      <mdui-button variant="elevated" href="https://www.mdui.org" target="_blank" disabled>disabled</mdui-button>
      <mdui-button variant="elevated" href="https://www.mdui.org" target="_blank" icon="settings">button</mdui-button>
      <mdui-button variant="elevated" href="https://www.mdui.org" target="_blank" end-icon="settings--outlined">button</mdui-button>
    </section>

    <section>
      <h2>slot icon</h2>
      <mdui-button variant="elevated">
        <mdui-icon name="settings" slot="icon"></mdui-icon>
        button
      </mdui-button>
      <mdui-button variant="elevated">
        <mdui-icon name="settings--outlined" slot="end-icon"></mdui-icon>
        button
      </mdui-button>
      <mdui-button variant="elevated">
        <mdui-icon-settings slot="icon"></mdui-icon-settings>
        button
      </mdui-button>
    </section>

    <section>
      <h2>css part</h2>
      <style>
        #part1::part(label) {
          color: red;
        }

        #part1::part(icon) {
          color: green;
        }
      </style>
      <mdui-button id="part1" icon="settings">button</mdui-button>

      <style>
        #part2::part(label) {
          color: red;
        }

        #part2::part(end-icon) {
          color: green;
        }
      </style>
      <mdui-button id="part2">
        <mdui-icon name="settings" slot="end-icon"></mdui-icon>
        button
      </mdui-button>
    </section>

    <section>
      <h2>custom style</h2>
      <style>
        .custom1 {
          height: 32px;
          font-size: 12px;
          border: 4px solid #bbb;
          background-color: aquamarine;
          box-shadow: 0 0 4px 4px red;
          border-radius: 4px;
        }
      </style>
      <mdui-button class="custom1">custom</mdui-button>

      <style>
        .custom2 {
          height: 48px;
          font-size: 24px;
          width: 300px;
          color: red;
        }
      </style>
      <mdui-button class="custom2" icon="settings" variant="filled">custom</mdui-button>
    </section>

    <h1>状态</h1>

    <section>
      <h2>Elevated button</h2>
      <div style="display: flex">
        <img
          src="https://lh3.googleusercontent.com/LpxrsfkTvTDslsvmXniNC2qfGK-q07F3hSlEt4mhIAndZFZ0iO4UKq6x6-3hEOdfnEefCCQK7Or-HECtj3gx3P_in7dgNWAg_zw_MbBM1w_k=s0"
          width="1024px" />
        <div style="white-space: nowrap">
          <div style="padding: 154px 16px 102px">
            <mdui-button variant="elevated">Enabled</mdui-button>
            <mdui-button variant="elevated" disabled>Disabled</mdui-button>
          </div>
          <div class="mdui-theme-dark" style="padding: 154px 16px 102px">
            <mdui-button variant="elevated">Enabled</mdui-button>
            <mdui-button variant="elevated" disabled>Disabled</mdui-button>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Filled button</h2>
      <div style="display: flex">
        <img
          src="https://lh3.googleusercontent.com/XrCtWjafuRbOukJ6Bf1nYQ4uVAaZeGuuzoBqlPXvkNOdI_9velEccnsEqK-AmFnxaW72koyj6COBAqtLXRFapzbwrcVC6b5cpbkSZADiwjJ5=s0"
          width="1024px" />
        <div style="white-space: nowrap">
          <div style="padding: 154px 16px 102px">
            <mdui-button variant="filled">Enabled</mdui-button>
            <mdui-button variant="filled" disabled>Disabled</mdui-button>
          </div>
          <div class="mdui-theme-dark" style="padding: 154px 16px 102px">
            <mdui-button variant="filled">Enabled</mdui-button>
            <mdui-button variant="filled" disabled>Disabled</mdui-button>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Filled tonal button</h2>
      <div style="display: flex">
        <img
          src="https://lh3.googleusercontent.com/PgZlsfgzZY-ldCHWXwXyDzs-pOCaEjxt1NHt5ENkTetLsMQ-hvPXBxCzs-0dI_9hGu1hCFzJoSz80PR-bDvXT5WAIH3VowMJVJlN98UzpwSsxg=s0"
          width="1024px" />
        <div style="white-space: nowrap">
          <div style="padding: 154px 16px 102px">
            <mdui-button variant="tonal">Enabled</mdui-button>
            <mdui-button variant="tonal" disabled>Disabled</mdui-button>
          </div>
          <div class="mdui-theme-dark" style="padding: 154px 16px 102px">
            <mdui-button variant="tonal">Enabled</mdui-button>
            <mdui-button variant="tonal" disabled>Disabled</mdui-button>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Outlined button</h2>
      <div style="display: flex">
        <img
          src="https://lh3.googleusercontent.com/UJuP4M03zYxdCNHzpkQ7PoaWLjom4fxYLbv71s5_V9436qtSlbH378mNY-HCsaAHYMPuAumYbJHnnxJhvwjTfkSQiUzP1n29VfuWZbzzH0Q=s0"
          width="1024px" />
        <div style="white-space: nowrap">
          <div style="padding: 154px 16px 102px">
            <mdui-button variant="outlined">Enabled</mdui-button>
            <mdui-button variant="outlined" disabled>Disabled</mdui-button>
          </div>
          <div class="mdui-theme-dark" style="padding: 154px 16px 102px">
            <mdui-button variant="outlined">Enabled</mdui-button>
            <mdui-button variant="outlined" disabled>Disabled</mdui-button>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Text button</h2>
      <div style="display: flex">
        <img
          src="https://lh3.googleusercontent.com/uPcoy6cNLDO4MMPM-syJy1RDtTezAvaxjdqWH-Y7S7TbSP5Vk4T4pQHEFZW4y1UaRHYBVVWViJkmCK5u6i5fwM2qExmG_HMIaVJSh6Fji-bphg=s0"
          width="1024px" />
        <div style="white-space: nowrap">
          <div style="padding: 154px 16px 102px">
            <mdui-button variant="text">Enabled</mdui-button>
            <mdui-button variant="text" disabled>Disabled</mdui-button>
          </div>
          <div class="mdui-theme-dark" style="padding: 154px 16px 102px">
            <mdui-button variant="text">Enabled</mdui-button>
            <mdui-button variant="text" disabled>Disabled</mdui-button>
          </div>
        </div>
      </div>
    </section>

  </main>
</body>

</html>
